// $(function() {
//     $("span").each((index, item) => {
//         for (let i = 0; i < $("span").length; i++) {
//             $("span").eq(i).on("click", function() {
//                 $("span").eq(i).addClass('current').siblings().removeClass('current').end();
//                 $("li").eq(i).addClass("current").siblings().removeClass('current').end();

//             })
//         }
//     })
// })

class TabChange {
    constructor(settings = {}) {
        this.el = document.querySelector(settings.el); // box
        this.oSpan = this.el.children[0].children; // span
        this.oLis = this.el.children[1].children[0].children; // li
        // console.log(this.oSpan);
        // console.log(this.oLis);

        this.clickHander();
    }
    clickHander() {
        Array.from(this.oSpan).forEach((item, index) => {
            item.addEventListener("click", () => {
                for (let i = 0; i < Array.from(this.oSpan).length; i++) {
                    this.oSpan[i].className = (i == index) ? 'current' : "";
                    this.oLis[i].className = (i == index) ? 'current' : "";
                }
            })
        })
    }
}

new TabChange({
    el: ".box"
})

// var oBox = document.querySelector(".box");
// oBox.style.backgroundColor = 'purple';